<template>
  <div v-loading="loading">
    <div class="text-right mb-2">
      <el-button size="small" :disabled="loading" @click="handleFlow">流程</el-button>
      <el-button
        size="small"
        icon="el-icon-printer"
        v-show="!editable"
        :disabled="loading"
        @click="handlePrint"
      >
        打印
      </el-button>
    </div>

    <div :id="printId">
      <table class="w-100">
        <tr>
          <td colspan="4">
            <h4 class="text-center">
              <div>保函审批表</div>
            </h4>
          </td>
        </tr>
      </table>
      <letter-edit
        v-if="!tableId"
        :view-mode="viewMode"
        :related-data="related"
        :form-data="formData"
        @success="handleSuccess"
        @dismiss="handleDismiss"
      ></letter-edit>
      <template v-for="(approve, index) of approval" v-else>
        <component
          v-if="approve.show"
          v-bind="$attrs"
          :key="index"
          :is="approve.cmpt"
          :view-mode="viewMode || !approve.editable"
          :table-id="tableId"
          :form-data="formData"
          :related-data="related"
          :approve-data="approve"
          @success="handleSuccess"
          @dismiss="handleDismiss"
        ></component>
      </template>
    </div>

    <flow-dialog
      title="保函审批流程"
      :visible.sync="flowVisible"
      :flow-data="approval"
    ></flow-dialog>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'
import { getRelated } from '@/credit/views/county/unionProvince/components/projectApprove/index'
import { getApprove } from '@/credit/mixin/wf'
import { mapGetters } from 'vuex'
import LetterEdit from '@/bigcredit/views/eletter/components/LetterEdit'
import FlowDialog from '@/credit/components/flow/Dialog'
import ApproveCommon from '@/credit/views/county/settle/bond/component/refund/ApproveCommon'
export default {
  components: {
    LetterEdit,
    FlowDialog,
    ApproveCommon,
  },
  props: {
    queryId: {
      type: String,
      required: true,
    },
    tableId: String,
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      approval: [],
      related: {},
      formData: {},
      flowVisible: false,
      tableName: 'ele_letter',
    }
  },
  computed: {
    ...mapGetters(['user']),
    printId() {
      return `${this.queryId}-project-letter-approval`
    },
    editable() {
      return !this.viewMode && this.approval.some(it => it.editable)
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getRelatedData()
      },
      immediate: true,
    },
    tableId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getRelatedData() {
      const { queryId } = this
      if (!queryId) {
        return
      }
      this.loading = true
      getRelated(queryId)
        .then(res => {
          this.related = res
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData() {
      const { tableId } = this
      if (!tableId) {
        return
      }

      this.loading = true
      return Promise.all([
        this.$api.getDataFromId(this.$serviceName, this.tableName, this.tableId),
        getApprove(
          {
            wfKey: 'ELE_APPROVAL',
            queryId: this.tableId,
            config: {
              'ELE_APPROVAL-RESA': {
                cmpt: 'letter-edit',
                rekey: null,
              },
            },
          },
          this.user
        ),
      ])
        .then(([formData, approval]) => {
          this.formData = formData.data ?? {}
          const data = approval[0] ?? {}
          const rekey = data.process?.wfn_key ?? null
          this.approval = approval.map(item => {
            if (item.process?.wfn_key !== rekey) {
              item.rekey = rekey
            }
            return item
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSuccess(res) {
      this.$emit('success', res)
    },

    handleDismiss() {
      this.$emit('dismiss')
    },
    handleFlow() {
      this.flowVisible = true
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .option {min-height: 7rem;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped></style>
